<template>
  <div class="com-search">
    <van-search
      v-model="value"
      :placeholder="tip"
      @search="onSearch"
      class="search-container"
      shape="round">
      <div class="search-position" slot="left-icon">
        <div class="area" @click="changeCity">{{selectArea}}&nbsp;&nbsp;</div>
        <van-icon class="position-icon" @click="autoPosition" name="location-o" />
        <span style="color: #a0a0a0;">|</span>
      </div>
      <div
        class="search-icon"
        slot="right-icon"
        @click="onSearch(value)">
        <van-icon name="search" size="22"/>
      </div>
    </van-search>
    <!-- 位置弹出层 -->
    <van-popup v-model="isShowArrea" style="width: 100%;">
      <van-area 
        :area-list="city" 
        title="选择城市"
        :columns-num="2"
        @cancel="onCityCancel"
        @confirm="onCityConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import area from '../assets/js/area.js'

export default {
  data() {
    return {
      value: '',
      tip: '搜索整形项目/医院/医生',
      isShowArrea: false,
      selectArea: '北京市',
      city: {...area}
    }
  },
  mounted() {
    this.selectCity = this.city.province_list[110000]
  },
  methods: {
    onSearch(val) {
      if (!val) {
        this.$toast('内容为空, 请输入')
        return
      }
      this.$toast('你想查询: ' + val)
    },
    // 想切换位置
    changeCity() {
      console.log('想切换城市')
      this.isShowArrea = true
    },
    // 地图定位
    autoPosition() {
      this.$toast('开启定位吗?')
    },
    onCityCancel() {
      this.isShowArrea = false
    },
    // 确认城市选择
    onCityConfirm(val) {
      console.log(val)
      this.isShowArrea = false
      try {
        if (val[2] && val[2].name) {
          this.selectArea = val[2].name
        } else if(val[1] && val[1].name) {
          this.selectArea = val[1].name
        } else if(val[0] && val[0].name) {
          this.selectArea = val[0].name
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/style/global.scss';

.com-search {
  width: 100%;
  .search-container {
    width: 100%;
    /deep/.van-cell__value{
      padding-left: 6PX !important;
      font-size: 12px !important;
      color: $colorInputBg !important;
    }
    .search-position {
      display: inline-flex;
      flex-direction: row;
      .area {
        font-size: 14px;
        font-weight: 600;
        color: $colorBlack;
        padding-right: 6PX !important;
      }
      .position-icon {
        padding-right: 6PX;
      }
    }
  }
}
</style>